<template>
  <view :style="colorStyle">
    <view class="spikeModule">
      <view class="spikeTitleModule" :style="navTitleModuleStyle">
        <image
          src="@/static/img14.png"
          @click="back"
          class="back"
          :style="navTitleModuleStyle3"
          mode="widthFix"
        ></image>
        <image
          src="http://xpj40szpt.signalpha.cn/img/img13.png"
          mode="widthFix"
          :style="navTitleModuleStyle2"
          class="title"
        ></image>
      </view>
      <image
        src="http://xpj40szpt.signalpha.cn/img/img11.png"
        class="bg"
        mode="widthFix"
      ></image>
      <!-- #ifdef MP-WEIXIN -->
      <view
        class=""
        :style="{ height: `${menuInfo.top + menuInfo.height}px;` }"
      >
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="" :style="{ height: `100rpx` }"> </view>
      <!-- #endif -->
      <view class="banner" v-if="banner.length !== 0">
        <swiper
          :indicator-dots="false"
          :autoplay="true"
          circular="true"
          :interval="3000"
          :duration="500"
        >
          <swiper-item v-for="(item, index, key) in banner" :key="key">
            <image
              :src="item.img"
              mode="aspectFill"
              @click.stop="bannerClickChange(item)"
            ></image>
          </swiper-item>
        </swiper>
      </view>

      <view
        class="ruleModule cfff f24"
        @click="goRule(`/pages/activities/rule?title=活动规则`)"
      >
        活动规则
      </view>

      <view class="activitiesModule">
        <view class="tabModule">
          <view
            class="activitiesList"
            v-for="(item, index, key) in activitiesList"
            :key="key"
            :style="{
              background: `${activitiesListindex == index ? '#fff' : ''}`,
            }"
            @click="activitiesListChange(index)"
          >
            <view class="block1 flex jcenter aitems column">
              <view
                class="info1 f28 cfff fontWeight"
                :style="{
                  color: `${
                    activitiesListindex == index ? 'var(--view-theme)' : ''
                  }`,
                }"
              >
                {{ item.title }}
              </view>
              <view
                class="info2 f20 cfff"
                :style="{
                  background: `${
                    activitiesListindex == index
                      ? 'var(--view-minorColorT)'
                      : ''
                  }`,
                  color: `${
                    activitiesListindex == index ? 'var(--view-theme)' : ''
                  }`,
                }"
              >
                {{ item.statusText }}
              </view>
            </view>
          </view>
        </view>
        <view class="goodsModule">
          <view
            class="goodslist flex aitems"
            v-for="(item, index, key) in list"
            :key="key"
            @click="gourl(`/pages/goods/detail?id=${item.goodsId}`)"
          >
            <image
              :src="item.goodsImg"
              mode="aspectFill"
              class="goodsimg"
            ></image>
            <view class="goodsinfo">
              <view class="goodsname c1F1F1F f28 fontWeight ellipsis1">
                {{ item.goodsName }}
              </view>
              <view class="pricebox flex aitems fontWeight">
                <view class="unit f32"> ￥ </view>
                <view class="price f44">
                  {{ item.config.detailList[0].price }}
                </view>
              </view>
              <view class="progressbox flex">
                <view class="left flex aitems">
                  <view class="progress">
                    <view
                      class="value"
                      :style="{ width: `${item.percentage}%` }"
                    >
                    </view>
                  </view>
                  <view class="num">
                    剩余{{
                      Number(item.goodsStock - item.salesVolume).toFixed(0)
                    }}
                  </view>
                </view>
                <view class="right"> 抢 </view>
              </view>
            </view>
          </view>

          <nodata v-if="list.length == 0" />
          <view class="" v-if="list.length == 0" style="height: 100rpx"> </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  publicityList,
  publicityGoodsPage,
  bannerList,
  updateParent,
} from "@/servers/servers.js";
import { back, loading, go } from "../../utils/wxAPI";
import colors from "@/mixins/color";
import { publicityType } from "../../keys/keys";
import { getGloBalData, getToken, setStorage } from "../../utils/storage";
import { HTTP_STATUS } from "../../servers/config";
import { handleLoopCallBack } from "../../utils/util";
import { bannerNavigateTo } from "@/utils/navigateTo";
export default {
  mixins: [colors],
  data() {
    return {
      publicityType,
      menuInfo: {},
      navTitleModuleStyle: "",
      navTitleModuleStyle2: "",
      navTitleModuleStyle3: "",
      list: [],
      activitiesList: [],
      activitiesListindex: 0,
      list: [],
      current: 1,
      total: 0,
      banner: [],
      options: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${this.menuInfo.top}px;height:${this.menuInfo.height}px;`;
    this.navTitleModuleStyle2 = `top:10rpx;`;
    this.navTitleModuleStyle3 = `top:6rpx;`;
    // #endif
    // #ifdef H5
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:44rpx;height:88rpx;`;
    // #endif

    if (getToken()) {
      this.bannerList();
      await this.publicityList();
      if (this.activitiesList.length !== 0) {
        this.publicityGoodsPage();
      }
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.bannerList();
        await this.publicityList();
        if (this.activitiesList.length !== 0) {
          this.publicityGoodsPage();
        }
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });

      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    goRule(url) {
      setStorage("rule", this.activitiesList[this.activitiesListindex].remark);
      go(url);
    },
    bannerClickChange(item) {
      bannerNavigateTo(item);
    },
    async bannerList() {
      let { data } = await bannerList({
        type: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let banner = data.data;
        this.banner = banner;
      }
    },
    async publicityList() {
      let { data } = await publicityList({
        type: "limitTimeSecKill",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let now = Date.now();
        list.map((item, index) => {
          item.config = item.config ? JSON.parse(item.config) : {};
          let endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();
          let beginTime = new Date(item.beginTime.replace(/-/g, "/")).getTime();

          if (now < beginTime) {
            item.statusText = "即将开始";
          } else if (endTime - now > 0) {
            item.statusText = "抢购中";
          } else {
            item.statusText = "已结束";
          }
          if (this.options.id) {
            if (item.id == this.options.id) {
              this.activitiesListindex = index;
            }
          }
        });
        this.activitiesList = list;
        console.log(list);
      }
    },
    async publicityGoodsPage() {
      loading();
      let { data } = await publicityGoodsPage({
        current: this.current,
        size: 10,
        publicityId: this.activitiesList[this.activitiesListindex].id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        list.map((item) => {
          //数据处理
          item.config = item.config ? JSON.parse(item.config) : [];
          item.goodsStock = 0;
          item.salesVolume = 0;
          item.config.detailList.map((items) => {
            item.goodsStock += items.stock;
            item.salesVolume += items.salesVolume;
          });

          let percentage = Number(item.salesVolume / item.goodsStock) * 100;
          item.percentage =
            Number(percentage) > 100 ? 100 : Number(percentage).toFixed(0);
        });
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        console.log(this.list);
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    activitiesListChange(index) {
      this.activitiesListindex = index;
      this.current = 1;
      this.publicityGoodsPage();
    },

    back() {
      back();
    },

    gourl(url) {
      go(url);
    },
  },

  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.publicityGoodsPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.publicityGoodsPage();
  },

  onShareAppMessage: function (e) {
    return {
      title: "限时秒杀",
      path: `/pages/activities/spike?uid=${getGloBalData("userinfo").id}&id=${
        this.options.id ? this.options.id : ""
      }`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.spikeModule {
  position: relative;

  .spikeTitleModule {
    position: absolute;
    z-index: 11;
    width: 100%;

    .back {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      left: 30rpx;
      // top: 0;
    }

    .title {
      position: absolute;
      width: 178rpx;
      left: 50%;
      margin-left: -89rpx;
      // top: 10rpx;
    }
  }

  .bg {
    position: absolute;
    width: 100%;
    top: 0;
  }

  .banner {
    margin: 30rpx 30rpx 0;
    border-radius: 28rpx;
    overflow: hidden;

    swiper {
      height: 296rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 28rpx;
      }
    }
  }
}

.activitiesModule {
  position: relative;
  margin: 30rpx 30rpx 0;
  background: #fff;
  border-radius: 36rpx;
  overflow: hidden;

  .tabModule {
    height: 126rpx;
    // background: var(--view-theme);
    white-space: nowrap;
    overflow-x: scroll;

    .activitiesList {
      background: var(--view-theme);
      display: inline-block;
      width: 230rpx;
      height: 100%;
      text-align: center;

      .block1 {
        height: 100%;

        .info1 {
        }

        .info2 {
          margin: 2rpx 0;
          background: var(--view-theme);
          padding: 2rpx 16rpx;
          border-radius: 16rpx;
        }
      }
    }
  }

  .goodsModule {
    margin: 30rpx 0 0;

    .goodslist {
      position: relative;
      padding: 0 24rpx 0;
      margin: 0 0 30rpx 0;
      overflow: hidden;

      .goodsimg {
        width: 220rpx;
        height: 220rpx;
        border-radius: 28rpx;
      }

      .goodsinfo {
        width: calc(100% - 20rpx - 220rpx);
        margin-left: 20rpx;

        .goodsname {
        }

        .pricebox {
          margin: 24rpx 0 0;
          color: var(--view-theme);

          .unit {
            position: relative;
            top: 8rpx;
          }

          .price {
          }
        }

        .progressbox {
          border-radius: 96rpx;
          height: 76rpx;
          margin: 20rpx 0 0;
          background: var(--view-minorColorT);
          width: 406rpx;
          overflow: hidden;

          .left {
            width: calc(100% - 128rpx - 48rpx);
            padding: 0 24rpx;

            .progress {
              width: 120rpx;
              height: 16rpx;
              border-radius: 56rpx;
              background: #fff;

              .value {
                width: 50%;
                height: 100%;
                background: var(--view-theme);
                border-radius: 56rpx;
              }
            }

            .num {
              color: var(--view-theme);
              font-size: 22rpx;
              margin-left: 14rpx;
            }
          }

          .right {
            width: 128rpx;
            height: 100%;
            text-align: center;
            font-size: 36rpx;
            line-height: 76rpx;
            color: #fff;
            font-weight: bold;
            position: relative;
            right: -8rpx;
            background: linear-gradient(
              270deg,
              var(--view-op-ten6) 0.96%,
              var(--view-theme) 97.01%
            );
          }
        }
      }
    }
  }
}
.ruleModule {
  position: fixed;
  width: 171rpx;
  height: 56rpx;
  border-radius: 28rpx 0 0 28rpx;
  right: 0;
  top: 166rpx;
  z-index: 9;
  background: rgba(0, 0, 0, 0.6);
  line-height: 56rpx;
  text-align: center;
}
</style>
